<script setup lang="ts">
//更多教师信息请求


let baseUrl = 'http://192.168.5.120:8090'

// 接收传过来的item
const props = defineProps({
        eachTeacher: {
            type: [Object, String]
        }
    }
)

//
</script>

<template>
    <div class="teacher">

        <div class="each">
            <div class="pic"><img
                    :src="baseUrl+props.eachTeacher.avatar"
                    alt="头像"></div>
            <div class="recommend">
                <div class="top">
                    <h3>{{ props.eachTeacher.name }}</h3>
                    <div v-if="props.eachTeacher.state==1">已满</div>
                    <div v-if="props.eachTeacher.state==0" style="background-color: #38A0FB">可约</div>
                </div>
                <p class="info">{{ props.eachTeacher.infos }}</p>
                <div class="label">
                    <div v-for="items in props.eachTeacher.labels" :key="items.id">{{ props.eachTeacher.label }}</div>
                </div>
            </div>
        </div>

    </div>

</template>

<style scoped lang="less">
.each {
  width: 92%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;

  .pic {
    width: 30%;
    height: 12vh;

    img {
      width: 100%;
      height: 100%;
      border-radius: 15px;
    }
  }

  .recommend {
    width: 65%;

    .info {
      width: 70%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    .top {
      height: 4vh;
      display: flex;
      justify-content: space-between;

      h3 {
        margin: 0;
      }

      div {
        padding: 6px 20px;
        border-radius: 5px;
        background-color: #B9C1C9;
        color: white;
        height: 20px;
        text-align: center;
        line-height: 20px;
      }
    }

    p {
      margin: 0 0 1vh;
    }

    .label {
      font-size: 12px;
      display: flex;
      justify-content: left;

      div {
        margin-right: 8px;
        background-color: #F2F9FF;
        color: #CEAFF8;
      }
    }
  }
}
</style>